import React, { Component } from 'react';
import { connect } from "react-redux";
import userImg from '../images/user_img.png'
import { Link } from "react-router-dom";
import { LOGIN_LINK, USER_INFO_LINK, APPLY_LINK } from "../actions/types.js"
import { checkAuth } from "../actions/index";
class PersonalCenter extends Component{
  componentWillMount(){
    this.props.checkAuth();
  }
  render(){
    return(
      <div className="personal-center">
        <div className="top-title" style={{backgroundColor:"#3299FE",color:"#fff",borderBottom:"1px solid #fff"}}>
          我的
        </div>
        <div className="p-background">
          {this.renderUserInfo()}
        </div>
        {this.renderOperation()}
      </div>
    )
  }
  renderUserInfo(){
    const { user } = this.props;
    if(this.props.user){
      let userAvatar = userImg
      if(user.img){
        userAvatar = `/images/${user.img}`;
      }
      return(
        <div className="p-user-info">
          <div className="p-user-img" style={{backgroundImage:`url(${userAvatar})`}}></div>
          <div className="p-desc">
            <div style={{fontSize:18}}>{user.nickName || "尊敬的用户"}</div>
            <div style={{fontSize:14}}>欢迎你</div>
          </div>
        </div>
      )
    }else{
      return(
        <div className="p-user-info">
          <Link to={LOGIN_LINK} className="p-user-img" style={{backgroundImage:`url(${userImg})`}}></Link>
          <div className="p-desc">
            <div style={{fontSize:18}}>立即登陆</div>
            <div style={{fontSize:14}}>登陆后可享受更多特权</div>
          </div>
        </div>
      )
    }
  }
  renderOperation(){
    if(this.props.status === "success"){
      return(
        <section style={{backgroundColor:"#fff",marginTop:"6px"}}>
          <Link to={USER_INFO_LINK} className="operation">
            <i className="fa fa-pencil-square-o" aria-hidden="true" style={{marginRight:"8px"}}></i>
            <span>个人信息</span>
          </Link>
          <Link to={APPLY_LINK} className="operation">
            <i className="fa fa-pencil-square-o" aria-hidden="true" style={{marginRight:"8px"}}></i>
            <span>报名参赛</span>
          </Link>
        </section>
      )
    }
  }
}

function mapStateToProps(state) {
  // console.log('state is',state);
  const { status, error, user } = state.auth;
  return{ user, status, error };
}

export default connect(mapStateToProps, {checkAuth})(PersonalCenter);